<template>
    <el-row :gutter="25" style="background-color: #F0F0F7;">
        <el-col :span="12" >
            <div class="grid-content bg-purple white-bg" style="padding: 40px;">
                <h3>出发地选项管理
                    <el-button type="primary" icon="el-icon-plus" @click="handAdd()">新增</el-button>
                    <el-dialog title="新增" :visible.sync="adddialogFormVisible" align="center">
                        <el-form ref="editForm" :rules="rules" :model="editForm">
                            <el-form-item label="地点名称" :label-width="formLabelWidth" prop="name">
                                <el-input v-model="editForm.name" autocomplete="off"></el-input>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="adddialogFormVisible = false">取 消</el-button>
                            <el-button type="primary" @click="addOrigin()" :loading="loading">{{ loading ? '提交中 ...' : '提交' }}</el-button>
                        </div>
                    </el-dialog>
                </h3>
                <el-table
                        border
                        :data="origins.filter(data => !search || data.label.toLowerCase().includes(search.toLowerCase())|| data.value==search)"
                        style="width: 100%">
                    <el-table-column
                            align="center"
                            width="65"
                            label="编号"
                            prop="value">
                    </el-table-column>
                    <el-table-column
                            label="地点名称"
                            prop="label">
                    </el-table-column>
                    <el-table-column
                            align="right">
                        <template slot="header" slot-scope="scope">
                            <el-input
                                    v-model="search"
                                    size="mini"
                                    placeholder="输入关键字搜索"/>
                        </template>
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                            <el-dialog title="编辑" :visible.sync="dialogFormVisible" align="center">
                                <el-form ref="editForm" :rules="rules" :model="editForm">
                                    <el-form-item label="地点名称" :label-width="formLabelWidth" prop="name">
                                        <el-input v-model="editForm.name" autocomplete="off"></el-input>
                                    </el-form-item>
                                </el-form>
                                <div slot="footer" class="dialog-footer">
                                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                                    <el-button type="primary" @click="updateOrigin()" :loading="loading">{{ loading ? '提交中 ...' : '提交修改' }}</el-button>
                                </div>
                            </el-dialog>

                            <el-popconfirm
                                    confirmButtonText='好的'
                                    cancelButtonText='不用了'
                                    icon="el-icon-info"
                                    iconColor="red"
                                    title="确定删除该地点信息吗？"
                                    @onConfirm="handleDelete(scope.$index, scope.row)"
                            >
                                <el-button
                                        style="margin-left: 10px;"
                                        slot="reference"
                                        size="mini"
                                        type="danger"
                                        @click="">删除</el-button>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-col>
        <el-col :span="12">
            <div class="grid-content bg-purple white-bg"  style="padding: 40px;">
                <h3>目的地选项管理
                    <el-button type="primary" icon="el-icon-plus" @click="handAdd2()">新增</el-button>
                    <el-dialog title="新增" :visible.sync="adddialogFormVisible2" align="center">
                        <el-form ref="editForm" :rules="rules" :model="editForm">
                            <el-form-item label="地点名称" :label-width="formLabelWidth" prop="name">
                                <el-input v-model="editForm.name" autocomplete="off"></el-input>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="adddialogFormVisible2 = false">取 消</el-button>
                            <el-button type="primary" @click="addDestination()" :loading="loading">{{ loading ? '提交中 ...' : '提交' }}</el-button>
                        </div>
                    </el-dialog>
                </h3>
                <el-table
                        border
                        :data="destinations.filter(data => !search || data.label.toLowerCase().includes(search.toLowerCase())|| data.value==search)"
                        style="width: 100%">
                     <el-table-column
                             align="center"
                             width="65"
                             label="编号"
                             prop="value">
                     </el-table-column>
                    <el-table-column
                            label="地点名称"
                            prop="label">
                    </el-table-column>
                    <el-table-column
                            align="right">
                        <template slot="header" slot-scope="scope">
                            <el-input
                                    v-model="search"
                                    size="mini"
                                    placeholder="输入关键字搜索"/>
                        </template>
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    @click="handleEdit2(scope.$index, scope.row)">编辑</el-button>
                            <el-dialog title="编辑" :visible.sync="dialogFormVisible2" align="center">
                                <el-form ref="editForm" :rules="rules" :model="editForm">
                                    <el-form-item label="地点名称" :label-width="formLabelWidth" prop="name">
                                        <el-input v-model="editForm.name" autocomplete="off"></el-input>
                                    </el-form-item>
                                </el-form>
                                <div slot="footer" class="dialog-footer">
                                    <el-button @click="dialogFormVisible2 = false">取 消</el-button>
                                    <el-button type="primary" @click="updateDestination()" :loading="loading">{{ loading ? '提交中 ...' : '提交修改' }}</el-button>
                                </div>
                            </el-dialog>
                            <el-popconfirm
                                    confirmButtonText='好的'
                                    cancelButtonText='不用了'
                                    icon="el-icon-info"
                                    iconColor="red"
                                    title="确定删除该地点信息吗？"
                                    @onConfirm="handleDelete2(scope.$index, scope.row)"
                            >
                                <el-button
                                        style="margin-left: 10px;"
                                        slot="reference"
                                        size="mini"
                                        type="danger"
                                        @click="">删除</el-button>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-col>
    </el-row>
</template>

<script>
    export default {
        name: "SystemSetting",
        inject:['reload'],
        data() {
            return {
                origins: [],
                destinations:[],
                search: '',
                dialogFormVisible: false,
                dialogFormVisible2: false,
                adddialogFormVisible: false,
                adddialogFormVisible2: false,
                editForm: {
                    name: '',
                },
                rules: {
                    name: [
                        { required: true, message: '请输入地址', trigger: 'blur' },
                        { min: 2, max: 25, message: '长度在 2 到 25 个字符', trigger: 'blur' }
                    ],
                },
                dialogOption:null,
                formLabelWidth: '120px',
                loading:false,
                timer: null,
            }
        },
        mounted(){
            this.getData();
        },
        methods: {
            async getData(){
                await this.axios.get("/option/getAllOption").then(res=>{
                    this.origins=res.data.origins;
                    this.destinations=res.data.destinations;
                    // this.emps=res.data.emps;
                });
            },

            //出发地相关操作
            handleEdit(index, row) {
                this.dialogFormVisible=true;
                this.editForm.name=row.label;
                this.dialogOption=row;
                //编辑;
            },
            updateOrigin() {
                //点击提交按钮
                if (this.loading) {
                    return;
                }
                //验证表单
                this.$refs['editForm'].validate((valid) => {
                    if (valid) {
                        this.loading = true;
                        this.timer = setTimeout(() => {
                            let origin = new URLSearchParams();
                            // console.log(this.dialogOption.value);
                            // console.log(this.dialogOption.label);
                            origin.append('oriid', this.dialogOption.value);
                            origin.append('oriname', this.editForm.name);
                            // 动画关闭需要一定的时间
                            setTimeout(() => {
                                this.axios.post("/origin/update",origin)
                                    .then(res=>{
                                        if (res.data==""){
                                            this.$notify({
                                                message: "权限不足,请联系高级管理员",
                                                type: 'error'
                                            });
                                        }else{
                                            this.$notify({
                                                message: res.data,
                                                type: 'success'
                                            });
                                        }
                                        /*this.$notify({
                                            message: res.data,
                                            type: 'success'
                                        });*/
                                        //关闭面板
                                        this.dialogFormVisible = false
                                        //重新渲染（CSDN上的快速刷新页面）
                                        this.reload();
                                    });
                                this.loading = false;
                            }, 700);
                        }, 700)
                    } else {
                        //表单验证失败
                        this.$message.error('请正确填写地址信息');
                        return false;
                    }
                });

            },
            handAdd(){
                this.adddialogFormVisible=true;
            },
            addOrigin(){
                //点击新增按钮
                if (this.loading) {
                    return;
                }
                //验证表单
                this.$refs['editForm'].validate((valid) => {
                    if (valid) {
                        this.loading = true;
                        this.timer = setTimeout(() => {
                            let origin = new URLSearchParams();
                            origin.append('oriname', this.editForm.name);
                            // 动画关闭需要一定的时间
                            setTimeout(() => {
                                this.axios.post("/origin/add",origin)
                                    .then(res=>{
                                        this.$notify({
                                            message: res.data,
                                            type: 'success'
                                        });
                                        //关闭面板
                                        this.adddialogFormVisible = false
                                        //重新渲染（CSDN上的快速刷新页面）
                                        this.reload();
                                    });
                                this.loading = false;
                            }, 700);
                        }, 700)
                    } else {
                        //表单验证失败
                        this.$message.error('请正确填写地址信息');
                        return false;
                    }
                });
            },
            handleDelete(index, row) {
                //删除
                let id=new URLSearchParams();
                id.append("id",row.value);
                setTimeout(() => {
                    this.axios.post("/origin/delete",id)
                        .then(res=>{
                            if (res.data==""){
                                this.$message({
                                    message: "权限不足,请联系高级管理员",
                                    type: 'error'
                                });
                            }else{
                                this.$message({
                                    message: res.data,
                                    type: 'success'
                                });
                            }
                            /*this.$message({
                                message: res.data,
                                type: 'success'
                            });*/
                            //重新渲染（CSDN上的快速刷新页面）
                            this.reload();
                        });
                    this.loading = false;
                }, 600);
            },

            //目的地相关操作
            handleEdit2(index, row) {
                this.dialogFormVisible2=true;
                this.editForm.name=row.label;
                this.dialogOption=row;
                //编辑;
            },
            updateDestination() {
                //点击提交按钮
                if (this.loading) {
                    return;
                }
                //验证表单
                this.$refs['editForm'].validate((valid) => {
                    if (valid) {
                        this.loading = true;
                        this.timer = setTimeout(() => {
                            let destination = new URLSearchParams();
                            // console.log(this.dialogOption.value);
                            // console.log(this.dialogOption.label);
                            destination.append('deid', this.dialogOption.value);
                            destination.append('dename', this.editForm.name);
                            // 动画关闭需要一定的时间
                            setTimeout(() => {
                                this.axios.post("/destination/update",destination)
                                    .then(res=>{
                                        if (res.data==""){
                                            this.$notify({
                                                message: "权限不足,请联系高级管理员",
                                                type: 'error'
                                            });
                                        }else{
                                            this.$notify({
                                                message: res.data,
                                                type: 'success'
                                            });
                                        }
                                       /* this.$notify({
                                            message: res.data,
                                            type: 'success'
                                        });*/
                                        //关闭面板
                                        this.dialogFormVisible = false
                                        //重新渲染（CSDN上的快速刷新页面）
                                        this.reload();
                                    });
                                this.loading = false;
                            }, 700);
                        }, 700)
                    } else {
                        //表单验证失败
                        this.$message.error('请正确填写地址信息');
                        return false;
                    }
                });

            },
            handAdd2(){
                this.adddialogFormVisible2=true;
            },
            addDestination(){
                //点击新增按钮
                if (this.loading) {
                    return;
                }
                //验证表单
                this.$refs['editForm'].validate((valid) => {
                    if (valid) {
                        this.loading = true;
                        this.timer = setTimeout(() => {
                            let destination = new URLSearchParams();
                            destination.append('dename', this.editForm.name);
                            // 动画关闭需要一定的时间
                            setTimeout(() => {
                                this.axios.post("/destination/add",destination)
                                    .then(res=>{
                                        this.$notify({
                                            message: res.data,
                                            type: 'success'
                                        });
                                        //关闭面板
                                        this.adddialogFormVisible = false
                                        //重新渲染（CSDN上的快速刷新页面）
                                        this.reload();
                                    });
                                this.loading = false;
                            }, 700);
                        }, 700)
                    } else {
                        //表单验证失败
                        this.$message.error('请正确填写地址信息');
                        return false;
                    }
                });
            },
            handleDelete2(index, row) {
                //删除
                let id=new URLSearchParams();
                id.append("id",row.value);
                setTimeout(() => {
                    this.axios.post("/destination/delete",id)
                        .then(res=>{
                            if (res.data==""){
                                this.$message({
                                    message: "权限不足,请联系高级管理员",
                                    type: 'error'
                                });
                            }else{
                                this.$message({
                                    message: res.data,
                                    type: 'success'
                                });
                            }
                            /*this.$message({
                                message: res.data,
                                type: 'success'
                            });*/
                            //重新渲染（CSDN上的快速刷新页面）
                            this.reload();
                        });
                    this.loading = false;
                }, 600);
            },




        }
    }

</script>

<style scoped>
    .el-row {
        margin-bottom: 20px;
        padding: 10px;
        text-align: center;
    }
    .grid-content {
        border-radius: 4px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }
    .white-bg {
        background-color:white;
    }
</style>
